<script setup lang="ts">
import { getCurrentPage, tabbarList } from '@/utils/common'
import { tabbar } from './helper'

defineOptions({
  name: 'Tabbar',
})

onMounted(() => {
  // #ifdef APP-PLUS | H5
  uni.hideTabBar({
    fail: (err) => {
      console.error('hideTabBar fail', err)
    },
    success: (res) => {
      console.log('hideTabBar success', res)
    },
  })
  // #endif
})

const list = tabbarList.map(item => ({ ...item, path: `/${item.pagePath}` }))

function handleChange(name: string) {
  tabbar.setValue(name)
  uni.switchTab({ url: name })
}

onShow(() => {
  tabbar.setValue(`/${getCurrentPage().route}`)
})
</script>

<template>
  <sar-tabbar v-model:current="tabbar.value" bordered safe-area-inset-bottom fixed @change="handleChange">
    <template v-for="item in list" :key="item.pagePath">
      <sar-tabbar-item v-if="item.iconType === 'ui'" :text="item.text" :icon="item.icon" :name="item.path" />
      <sar-tabbar-item v-else :text="item.text" :icon="item.icon" :name="item.path">
        <template #icon>
          <image :src="tabbar.value === item.path ? item.selectedIconPath : item.iconPath" class="h-40rpx w-40rpx" />
        </template>
      </sar-tabbar-item>
    </template>
  </sar-tabbar>
</template>

<style scoped>

</style>
